<style>
  .collection_detail_default .collection_img {
    width: 100%;
    height: 400px;
  }

  .collection_detail_default .collection_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .collection_detail_default .collection_detail {
    margin-bottom: 20px;
    text-align: center;
  }
  .collection_detail_default .collection_detail.hide_more{
    max-height: var(--more-height);
    overflow: hidden;
  }
  .collection_detail_default .show_more_description {
    text-align: center;
  }

  .collection_detail_default .show_more_description span{
    display: inline-flex;
    align-items: center;
    margin-bottom: 20px;
    cursor: pointer;
  }
  .collection_detail_default .show_more_description svg {
    transition: transform 0.18s ease;
  }
  .collection_detail_default .show_more_description .show_more svg {
    transform: rotate(180deg);
  }

  .collection_detail_default .collection_bom_detail {
    text-align: center;
  }
  .collection_detail_default .collection_bom_detail.hide_more {
    max-height: var(--more-height);
  }
  .collection_detail_default .show_more_description_bottom span {
    margin-bottom: 0;
    margin-top: 20px;
  }
  .collection_detail_default .collection_top_bar {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    padding-bottom:20px;
  }

  .collection_detail_default .sort_by {
    align-items: center;
  }

  .collection_detail_default .sort_by span {
    margin-right: 15px;
  }

  .collection_detail_default .sort_by select {
    height: 40px;
    border: 1px solid #d4d4d4;
    cursor: pointer;
  }

  .collection_detail_default .collection_content ul {
    display: grid;
    grid-row-gap: 30px;
    grid-column-gap: 40px;
    grid-template-columns: repeat(var(--web_column), minmax(50px, 1fr));
  }

  .collection_detail_default .collection_content li {
    list-style-type: none;
    text-align: center;
  }

  .collection_detail_default .collection_content .product_pic {
    margin-bottom: 30px;
    position: relative;
  }

  .collection_detail_default .collection_content .soldout {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 50px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 14px;
  }

  .collection_detail_default .collection_content .product_pic .product_img {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100%;
  }

  .collection_detail_default .collection_content .product_pic img {
    max-width: 100%;
  }

  .collection_detail_default .collection_content .block_product_name {
    margin-bottom: 10px;
    line-height: 1.5;
  }

  .collection_detail_default .collection_content .product_price {
    font-weight: bold;
  }

  .collection_detail_default .collection_content .product_oldprice {
    color: #888;
    text-decoration: line-through;
    margin-left: 5px;
    font-weight: normal;
  }

  @media (max-width: 768px) {
    .collection_detail_default .collection_content ul {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (max-width: 767px) {
    .collection_detail_default .collection_content ul {
      grid-row-gap: 30px;
      grid-column-gap: 15px;
      grid-template-columns: repeat(2, minmax(50px, 1fr)) !important;
    }
    .collection_detail_default .collection_content_more {
      margin-top: 30px;
    }
    .collection_detail_default .collection_content .product_pic {
      margin-bottom: 20px;
    }
  }

  .collection_detail_default .collection_content_product_3 ul{
    grid-template-columns: repeat(3, minmax(50px, 1fr));
  }

  @media screen and (min-width: 768px) and (max-width: 1200px) {
    .block_collection_list .collection_product_pc_4 ul {
      grid-template-columns: repeat(3, minmax(50px, 1fr));
    }
  }

  .collection_detail_default df-oemmenu{
    display: block;
    width:100%;
  }
  .collection_detail_default df-oemmenu + df-oemmenu{
    border-top:1px solid #ddd
  }
  .collection_detail_default df-oemmenu df-oemmenu-label {
    display: flex;
    align-items: center;
    font-size: 14px;
    min-height:40px;
    padding:6px 20px 6px 0;
    font-weight: bold;
    cursor: pointer;
    position: relative;
  }
  .collection_detail_default df-oemmenu df-oemmenu-label::before {
    position: absolute;
    top: 50%;
    right: 0;
    width: 16px;
    height: 1px;
    background-color: var(--menu-color, #000);
    content: "";
  }
  .collection_detail_default df-oemmenu df-oemmenu-label::after {
    position: absolute;
    right: 8px;
    top: 50%;
    bottom: 0;
    height: 16px;
    width: 1px;
    margin-top: -8px;
    opacity: 1;
    background-color: var(--menu-color, #000);
    transition: all 0.2s;
    content: "";
  }
  df-oemmenu-warp{
    display:block;
  }
  .collection_detail_default df-oemmenu df-oemmenu-warp {
    display: none;
  }

  .collection_detail_default .df-oemmenu-acrive  df-oemmenu-warp {
    display: block;
  } 
  .df-oemmenu-acrive df-oemmenu-label::after {
    transform: rotate(270deg);
    opacity: 0 !important;

  }
  .filter-box .filter-box-item{
    padding:0;
    display:flex;
    line-height: 18px;
    justify-content: start;
    text-align: left;
    margin-bottom: 20px;
  }
  .collection-filter-box{
    width:240px;margin-right: 40px;
  }

  .collection-filter-warp{
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }

  .collection_detail_default df-oemdrawer-popup {
    position: fixed;
    z-index: 50102;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    display: none;
  }

  .df-oemdrawer-open df-oemdrawer-popup {
    display: flex;
  }

  .df-oemdrawer-open .df-oemdrawer-popup-open[position="left"],
  .df-oemdrawer-open .df-oemdrawer-popup-open[position="right"] {
    transform: translateX(0);
  }

  .df-oemdrawer-open .df-oemdrawer-popup-open[position="top"],
  .df-oemdrawer-open .df-oemdrawer-popup-open[position="bottom"] {
    transform: translateY(0);
  }
  .drawer-cover{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 10;

  }
  .collection_detail_default df-oemdrawer-popup-warp {
    background-color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 100;
  }

  .collection_detail_default df-oemdrawer-popup-warp[position="left"] {
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    transform: translateX(-100%);
    height: 100%;
    transition: all 0.35s ease-in-out;
  }

  .collection_detail_default df-oemdrawer-popup-warp[position="right"] {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    transform: translateX(100%);
    height: 100%;
    transition: all 0.35s ease-in-out;
  }

  .collection_detail_default df-oemdrawer-popup-warp[position="top"] {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    transform: translateY(-100%);
    transition: all 0.35s ease-in-out;
  }

 
  .collection_detail_default df-oemdrawer-popup-warp[position="bottom"] {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    transform: translateY(100%);
    transition: all 0.35s ease-in-out;
  }
  .drawer-header{
    height:56px;
    text-align: center;
    line-height: 56px;
    position: relative;
  }
  .drawer-header df-oemdrawer-close{
    position: absolute;
    right: 15px;
    top: 15px;
  }
  .collection_detail_default df-oemdrawer-popup .drawer-footer{
    padding: 20px 15px;
    border-top:1px solid #DDDDDD;
  }
  .drawer-body{
    padding: 0 15px;
    max-height: 60vh;
    overflow-y: auto;
  }
  .filter-button{
    height: 36px;
    padding: 0 10px;
    border: 1px solid #1D1F21;
    border-radius: 4px;
  }
  .drawer-footer .drawer-btn{
    margin-top: 0;
  }
  .web_filter_clear{
    height: 60px;
    line-height: 60px;
    text-decoration: underline;
    display: none;
    cursor: pointer;
  }

  .collection-filter-box{
    width:18%;margin-right: 4%;
    display: block;
  }

  .filter-box .checkbox_label .check_icon{
    flex-shrink: 0;
  }
  .collection_detail_default .collection-filter-wap{
    justify-content: space-between;
  }
  @media screen and (min-width: 767px) {
    .collection-filter-sticky{
      position:sticky;
      top:0;
    }
  }
  @media screen and (max-width: 767px) {
    .collection-filter-box{
      display: none;
    }
  
  }
</style>

<style>
  .mo-pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 0;
      font-size: 0;
  }
  .mo-pagination .mo-pagination-value, .mo-pagination .mo-pagination-handle {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      box-sizing: border-box;
      margin: 0 5px;
  }

  .mo-pagination .mo-pagination-handle {
      overflow: hidden;
      cursor: pointer;
  }
  .mo-pagination .mo-pagination-handle path {
      fill:#1D1F21
  }

  .mo-pagination .mo-pagination-value {
      color: #1D1F21;
  }
  .mo-pagination .mo-pagination-value:hover{
      border: 1px solid #1D1F21;
  }
  .mo-pagination .mo-pagination-value-active{
      color: #1D1F21;
      border: 1px solid #1D1F21;
  }
  .mo-pagination .mo-pagination-handle-disable{
      cursor: not-allowed;
  }
  .mo-pagination .mo-pagination-handle-disable path{
      fill:#999999
  }
  .filter-price-box{
    display: flex;
  }
  .filter-price-box span{
    max-width: 40px;
    margin-right:6px;
  }
  .filter-price-box input{
    padding: 9px;
    flex: 1;
    flex-shrink: 0;
    border: 1px solid rgba(136, 138, 139, 0.2);
    border-radius: 4px;
  }

  .container-label-warp{
    padding-bottom:20px;
    display:flex;
    flex-wrap: wrap;
    gap:10px
  }

  .container-label-warp-item{
    border-radius: 18px;
    opacity: 1;
    border: 1px solid #DDDDDD;
    font-size: 14px;
    line-height: 18px;
    padding:5px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    
  }
  .container-label-warp-item-delete{
    margin-left: 10px;
  }
  .container-label-warp-clear{
    font-size: 14px;
    line-height: 18px;
    padding:5px 15px;
    cursor: pointer;
    text-decoration: underline;

  }

</style>


{% if section.page_id %}
{% get_collection_by_id id = { section.page_id } %}
{% assign collection_detail = collection %}
{% assign paginate = paginate %}
{% assign theme_config = section.theme_config %}
{% endif %}

{% if section.settings.show_vendor %}
  {% get_vendor collection_id={collection_detail.id}  %}
  {% assign vendor_list = vendor_list %}
{% endif %}

{%- capture fill_container -%}
  {%- if section.settings.is_fill -%}
    full_container_wrapper
  {%- else -%}
    container_wrapper
  {%- endif -%}
{%- endcapture -%}

{% assign pagination_type = section.settings.pagination_type | default:1 %}
<div class="collection_detail_default {{ fill_container }}" id="collection_detail">
  
  <div class="plugin-container-header"></div>
  <h1 class="title">{{ collection_detail.title | default : lang.collections.detail.all_products }}</h1>
  {% if section.settings.show_top and collection_detail.top_descript != "" %}
    <div class="collection_detail mo-editor-reset {% if section.settings.show_more_description != '' %}hide_more{% endif %}" style="--more-height: {{ section.settings.more_height }}px;">{{ collection_detail.top_descript|html_content_filter }}</div>
  {% endif %}
  {% if section.settings.show_more_description != '' and section.settings.show_top and collection_detail.top_descript != "" %}
    <div class="show_more_description show_more_description_top">
      <span>
        {{ section.settings.show_more_description }}
        <svg t="1706765988205" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8333" width="12" height="12"><path fill="currentColor" d="M84.48 375.104C71.456 362.528 64.096 345.248 64 327.168 65.696 286.368 100 254.592 140.8 256.032 161.92 255.936 182.176 264.288 197.12 279.2L512 591.904 826.88 279.2C841.824 264.288 862.08 255.936 883.2 256.032 924 254.592 958.304 286.368 960 327.168 959.904 345.248 952.544 362.528 939.52 375.104L568.32 744.96C537.056 775.68 486.944 775.68 455.68 744.96L84.48 375.104Z" p-id="8334"></path></svg>
      </span>
    </div>
  {% endif %}

  {% if section.settings.tag_type == 1 %}
    <div class="container-label-warp"></div>
  {% endif %}

  <div class="df-flex" id='collection_detail_scrollTop'>
    {% if section.blocks.size > 0 or vendor_list.size  or section.settings.show_price  %}
      <div class="collection-filter-box">
        <div class="collection-filter-sticky">
          {% if section.settings.tag_type != 1 %}
          <div class="filter_clear web_filter_clear">{{lang.collections.detail.clear_all | default:"Clear all"}}</div>
          {% endif %}
          <div class="collection-filter-warp">
            {% if section.settings.show_price %}
            <df-oemmenu >
              <df-oemmenu-label>
                <span class="df-font-bold">{{lang.account.orders_detail.price}}</span>
              </df-oemmenu-label>
              <df-oemmenu-warp>
                  <div class="filter-box">
                      <label class="filter-box-item checkbox_label mo-checkbox filter-price-box"  style="align-items: center;" >  
                        <span>{{currency.symbol_left | default:currency.symbol_right}}</span>
                        <input  placeholder="{{lang.general.from}}" id="variant_price_min"/>
                      </label>
                      <label class="filter-box-item checkbox_label mo-checkbox filter-price-box" style="align-items: center;" >  
                        <span>{{currency.symbol_left | default:currency.symbol_right}}</span>
                        <input placeholder="{{lang.general.to}}" id="variant_price_max"/>
                      </label>
                  </div>
              </df-oemmenu-warp>
            </df-oemmenu>
            {% endif %}

            {% if vendor_list.size %}
            <df-oemmenu >
              <df-oemmenu-label>
                <span class="df-font-bold">{{lang.general.vendor}}</span>
              </df-oemmenu-label>
              <df-oemmenu-warp>
                <div class="filter-box">
                      {% for vendor in vendor_list %}
                      <label class="filter-box-item checkbox_label mo-checkbox" >  
                        <input class=" mo-checkbox_input order_checkbox " style=" flex-shrink: 0;" type="checkbox" name="webVendor" value="{{vendor}}"/>
                        <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>{{vendor}}
                      </label>
                      {% endfor %}
                  </div>
              </df-oemmenu-warp>
            </df-oemmenu>
            {% endif %}

            {% for block in section.blocks %}
            {% assign ids = block.filter.product_tag | get_array_values: "value" | join: "," %}
            {% get_labels ids={ids} sort={block.filter.sort} type={block.filter.filter_type} tag_linkage={section.settings.tag_type} collection_id={collection_detail.id} %}
            {% if label_list.size %}
            <df-oemmenu  class="collection-filter-tag-box {% if block.filter_open %}df-oemmenu-acrive{% endif %}" >
              <df-oemmenu-label>
                <span class="df-font-bold">{{block.filter_title}}</span>
              </df-oemmenu-label>
              <df-oemmenu-warp>
                  <div class="filter-box web-filter-box">
                    {% for tag in label_list %}
                      <label class="filter-box-item checkbox_label mo-checkbox" >  
                        <input class=" mo-checkbox_input order_checkbox " style=" flex-shrink: 0;" type="checkbox" name="webCollectionFilter" value="{{tag.id}}"/>
                        <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>{{tag.tag_name}}
                      </label>
                    {% endfor %}
                  </div>
              </df-oemmenu-warp>
            </df-oemmenu>
            {% endif %}
            {% endfor %}
          </div>
        </div>

      </div>
    {% endif %}
   
    <div class="df-flex-1 df-w-full ">
      <div  class="collection-filter-sticky">
       
        <div class="collection_top_bar">
          <div class="df-flex collection-filter-wap df-items-center df-w-full">
            {%- if section.settings.show_sort or section.settings.show_vendor or section.settings.show_price or section.blocks.size > 0 -%}
            <df-oemdrawer class="df-block md:df-hidden">
              <df-oemdrawer-label class="df-flex df-items-center filter-button">
                <svg t="1676972155640" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8122" width="24" height="24"><path d="M192 352m32 0l512 0q32 0 32 32l0 0q0 32-32 32l-512 0q-32 0-32-32l0 0q0-32 32-32Z" fill="#1D1F21" p-id="8123"></path><path d="M192 640m32 0l512 0q32 0 32 32l0 0q0 32-32 32l-512 0q-32 0-32-32l0 0q0-32 32-32Z" fill="#1D1F21" p-id="8124"></path><path d="M288 288m32 0l0 0q32 0 32 32l0 128q0 32-32 32l0 0q-32 0-32-32l0-128q0-32 32-32Z" fill="#1D1F21" p-id="8125"></path><path d="M608 576m32 0l0 0q32 0 32 32l0 128q0 32-32 32l0 0q-32 0-32-32l0-128q0-32 32-32Z" fill="#1D1F21" p-id="8126"></path></svg>
                <span style="margin-left: 5px;">{{lang.collections.detail.filter}}</span>
              </df-oemdrawer-label>
              <df-oemdrawer-popup>
                <df-oemdrawer-close class="drawer-cover drawer-close"></df-oemdrawer-close>
                <df-oemdrawer-popup-warp position="bottom">
                  <div class="df-w-screen">
                    <div class="drawer-header">
                      <span class="df-font-bold" >{{lang.collections.detail.filter}}</span>
                      <df-oemdrawer-close class="df-flex df-items-center drawer-close">
                        <svg t="1676972642582" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8275" width="20" height="20"><path d="M571.008 511.936l313.088-311.04a42.688 42.688 0 0 0 0-58.816l-2.496-2.496a40.384 40.384 0 0 0-56.704 0l-313.088 313.6-313.088-311.04a40.384 40.384 0 0 0-56.704 0l-2.496 2.496a42.688 42.688 0 0 0 0 58.816l313.088 308.608-313.088 311.04a42.688 42.688 0 0 0 0 58.816l2.496 2.496a40.384 40.384 0 0 0 56.704 0l313.088-313.6 313.088 311.04a40.384 40.384 0 0 0 56.704 0l2.496-2.496a42.688 42.688 0 0 0 0-58.816z" fill="#1D1F21" p-id="8276"></path></svg>
                      </df-oemdrawer-close>
                    </div>
                    <div class="drawer-body collection-mobile-filter">
                      {%- if section.settings.show_sort -%}
                      <df-oemmenu class='df-block md:df-visible'>
                        <df-oemmenu-label>
                          <span class="df-font-bold" >{{lang.general.sort_by}}</span>
                        </df-oemmenu-label>
                        <df-oemmenu-warp>
                          <div class="filter-box">
                              {% for option in collection_detail.sort_options %}
                                <label class="filter-box-item checkbox_label mo-checkbox" >  
                                  {% assign sort_by = collection_detail.sort_by | lstrip %}
                                  <input class=" mo-checkbox_input order_checkbox" type="radio" style=" flex-shrink: 0;" {% if option.value == sort_by %}checked{% endif %}   name="sortBy" value="{{option.value}}"/>
                                  <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>{{option.name}}
                                </label>
                              {% endfor %}
                          </div>
                        </df-oemmenu-warp>
                      </df-oemmenu>
                      {%- endif -%}
                      {% if section.settings.show_price %}
                        <df-oemmenu >
                          <df-oemmenu-label>
                            <span class="df-font-bold">{{lang.account.orders_detail.price}}</span>
                          </df-oemmenu-label>
                          <df-oemmenu-warp>
                              <div class="filter-box">
                                  <label class="filter-box-item checkbox_label mo-checkbox filter-price-box" style="align-items: center;">  
                                    <span>{{currency.symbol_left | default:currency.symbol_right}}</span>
                                    <input  placeholder="{{lang.general.from}}" id="mobile_variant_price_min"/>
                                  </label>
                                  <label class="filter-box-item checkbox_label mo-checkbox filter-price-box" style="align-items: center;">  
                                    <span>{{currency.symbol_left | default:currency.symbol_right}}</span>
                                    <input placeholder="{{lang.general.to}}" id="mobile_variant_price_max"/>
                                  </label>
                              </div>
                          </df-oemmenu-warp>
                        </df-oemmenu>
                        {% endif %}
            
                        {% if vendor_list.size %}
                        <df-oemmenu >
                          <df-oemmenu-label>
                            <span class="df-font-bold">{{lang.general.vendor}}</span>
                          </df-oemmenu-label>
                          <df-oemmenu-warp>
                            <div class="filter-box">
                                  {% for vendor in vendor_list %}
                                  <label class="filter-box-item checkbox_label mo-checkbox" >  
                                    <input class=" mo-checkbox_input order_checkbox " style=" flex-shrink: 0;" type="checkbox" name="mobileVendor" value="{{vendor}}"/>
                                    <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>{{vendor}}
                                  </label>
                                  {% endfor %}
                              </div>
                          </df-oemmenu-warp>
                        </df-oemmenu>
                        {% endif %}
                      {% for block in section.blocks %}
                      {% assign ids = block.filter.product_tag | get_array_values: "value" | join: "," %}
                      {% get_labels ids={ids} sort={block.filter.sort} type={block.filter.filter_type} collection_id={collection_detail.id} %}
                      {% if label_list.size %}

                      <df-oemmenu class="mobile-filter-tag-box {% if block.filter_open %}df-oemmenu-acrive{% endif %}">
                        <df-oemmenu-label>
                          <span class="df-font-bold" style="font-size: 16px;">{{block.filter_title}}</span>
                        </df-oemmenu-label>
                        <df-oemmenu-warp>
                            <div class="filter-box mobile-filter-box">
                              {% for tag in label_list %}
                                <label class="filter-box-item checkbox_label mo-checkbox" >  
                                  <input class=" mo-checkbox_input order_checkbox " type="checkbox" style=" flex-shrink: 0;" data-type="mobile"  name="mobileCollectionFilter" value="{{tag.id}}"/>
                                  <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>{{tag.tag_name}}
                                </label>
                              {% endfor %}
                            </div>
                        </df-oemmenu-warp>
                      </df-oemmenu>
                      {% endif %}
                      {% endfor %}
                    </div>
                    <div class="drawer-footer df-flex df-gap-4">
                      {% if section.settings.tag_type != 1 %}
                      <div class="drawer-btn secondary_btn df-px-5 filter_clear drawer-close">{{lang.collections.detail.clear_all | default:"Clear all"}}</div>
                      {% endif %}
                      <div class="drawer-btn main_btn df-flex-1 drawer-close" id="filter_submit">{{lang.cart.list.apply | default:"Apply"}}</div>

                    </div>
                  </div>
                
                </df-oemdrawer-popup-warp>
              </df-oemdrawer-popup>
            </df-oemdrawer>
            {%- endif -%}
            <div class="product_num"><span>{{ collection_detail.all_products_count }}</span> {{ lang.collections.detail.products }}</div>

            {%- if section.settings.show_sort -%}
              <div class="sort_by df-hidden md:df-flex">
                <span style="display:inline-block;">{{ lang.general.sort_by }}</span>
                <select class="form-control" id='sort_by_select'>
                  {% assign sort_by = collection_detail.sort_by  | lstrip %}
                  {% for option in collection_detail.sort_options %}
                  <option value="{{option.value}}" {% if option.value == sort_by %}selected="selected" {% endif %}>{{ option.name }}</option>
                  {% endfor %}
                </select>
              </div>
            {%- endif -%}
          </div>
         
        </div>

        <div id="collection-product-warp" class="collection_content" style="--web_column:{{section.settings.web_column | default:4}}">
          {% if pagination_type == 1 %}
            {% if collection_detail.products | size %}
              <div class="collection_content collection_product_wap_2 df-overflow-hidden" id="collection-product-content">
                <ul >
                  {% for product in collection_detail.products %}
                  {% include collection_product , product : product , collection_handle:collection_detail.handle  %}
                  {% endfor %}
                </ul>
                {% include pagination ,{ paginate : paginate } %}
              </div>
            {% else %}
            {% include empty ,{text:lang.general.empty }%}
            {% endif %}
          {% else %}
            <div id="collection-product-content"></div>
          {% endif %}

        </div>
      
      </div>
    </div>
  </div>
  {% if section.settings.show_bottom %}
  <div class="collection_bom_detail mo-editor-reset {% if section.settings.show_more_description != '' %}hide_more{% endif %}" style="overflow: hidden;--more-height: {{ section.settings.more_height }}px;">
    {{collection_detail.bottom_descript|html_content_filter}}
  </div>
  {% endif %}
  {% if section.settings.show_more_description != '' and section.settings.show_bottom and collection_detail.bottom_descript != "" %}
    <div class="show_more_description show_more_description_bottom">
      <span>
        {{ section.settings.show_more_description }}
        <svg t="1706765988205" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8333" width="12" height="12"><path fill="currentColor" d="M84.48 375.104C71.456 362.528 64.096 345.248 64 327.168 65.696 286.368 100 254.592 140.8 256.032 161.92 255.936 182.176 264.288 197.12 279.2L512 591.904 826.88 279.2C841.824 264.288 862.08 255.936 883.2 256.032 924 254.592 958.304 286.368 960 327.168 959.904 345.248 952.544 362.528 939.52 375.104L568.32 744.96C537.056 775.68 486.944 775.68 455.68 744.96L84.48 375.104Z" p-id="8334"></path></svg>
      </span>
    </div>
  {% endif %}
  <div class="plugin-container-footer"></div>

	
</div>
<script type="text/x-template" id="collection-product-empty-temp">
  {% include "empty" , text:lang.general.empty  %}
</script>

{% include 'collection_product_waterfall' %}
<script type="text/x-template" id="collection-paginate-temp">
  {% raw %}
    {% if paginate and paginate.current_page != 0 %}
      <div class="mo-pagination">
          <a href="javascript:;" data-https="{{paginate.previous.url}}" class="mo-pagination-handle {% if paginate.current_page == 1 %}mo-pagination-handle-disable{% endif %}">
              <svg t="1632633670584" class="arrow-1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1448" width="16" height="16">
                  <path d="M751.61600001 175.104l-360.0896 337.6128 359.67999999 336.0768a50.3296 50.3296 0 0 1 0 74.3936 58.88 58.88 0 0 1-79.4112 0.1024l-399.36-373.248a50.3296 50.3296 0 0 1 0-74.3424l399.7184-374.8864a58.88 58.88 0 0 1 79.4112-0.1024 50.3296 50.3296 0 0 1 0 74.3936z" p-id="1449" fill="#888888"></path>
              </svg>
          </a>
          {% for part in paginate.parts %}
          {% if part.is_link %}
          <a href="javascript:;" data-https="{{part.url}}" class="mo-pagination-value {% if part.title == paginate.current_page %}mo-pagination-value-active{% endif %}">{{ part.title }}</a>
          {% else %}
          <span class="mo-pagination-value">{{ part.title }}</span>
          {% endif %}
          {% endfor %}
          <a href="javascript:;" data-https="{{paginate.next.url}}"  class="mo-pagination-handle {% if paginate.current_page == paginate.pages %}mo-pagination-handle-disable{% endif %}">
              <svg t="1632633684430" class="arrow-1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1590" width="16" height="16">
                  <path d="M272.384 848.896l360.0896-337.6128-359.68-336.0768a50.3296 50.3296 0 0 1 0-74.3936 58.88 58.88 0 0 1 79.4112-0.1024l399.36 373.248a50.3296 50.3296 0 0 1 0 74.3424l-399.7184 374.8864a58.88 58.88 0 0 1-79.4112 0.1024 50.3296 50.3296 0 0 1 0-74.3936z" p-id="1591" fill="#888888"></path>
              </svg>
          </a>
      </div>
    {% endif %}
  {% endraw %} 
</script>


<script type="text/javascript">
	$(function(){
    const sectionTagType = "{{section.settings.tag_type}}";
    function labelShow(tagIds,labels,current_labels){
      if (sectionTagType != '1') {
        return
      }
      tagIds = JSON.parse(tagIds);
      if(!Object.keys(tagIds).length || !tagIds){
        return
      }
      let index = Object.keys(tagIds)[0]
      let pcLabelHtml = '';
      let wapLabelHtml = '';
      $(".collection-filter-tag-box").hide()
      $(".collection-filter-tag-box").eq(index).show()
      $(".mobile-filter-tag-box").hide()
      $(".mobile-filter-tag-box").eq(index).show()

      if(labels && labels.length){
        for (let i = 0; i < labels.length; i++) {
          const tag = labels[i];
          pcLabelHtml+=`<label class="filter-box-item checkbox_label mo-checkbox" >  
                        <input class=" mo-checkbox_input order_checkbox " style=" flex-shrink: 0;" type="checkbox" name="webCollectionFilter" value="${tag.id}"/>
                        <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>${tag.tag_name}
                      </label>`;
          wapLabelHtml+=`  <label class="filter-box-item checkbox_label mo-checkbox" >  
                                  <input class=" mo-checkbox_input order_checkbox " type="checkbox" style=" flex-shrink: 0;" data-type="mobile"  name="mobileCollectionFilter" value="${tag.id}"/>
                                  <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>${tag.tag_name}
                                </label>`
        }
    
        $(".web-filter-box").eq(index).show().html(pcLabelHtml)
        $(".mobile-filter-box").eq(index).show().html(wapLabelHtml)
      }else{
        // $(".collection-filter-tag-box").eq(index).find(".web-filter-box").hide()
        // $(".mobile-filter-tag-box").eq(index).find(".mobile-filter-box").hide()
      }

      if(current_labels && current_labels.length){

        let currentLabelHtml = ""
        for (let i = 0; i < current_labels.length; i++) {
            const tag = current_labels[i];
            currentLabelHtml+=` <div class="container-label-warp-item" data-id="${tag.id}">
        <span>${tag.tag_name}</span>
        <svg class="container-label-warp-item-delete" data-index="1" viewBox="0 0 1024 1024" style="" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4673" width="16" height="16"><path d="M804.992 838.229333L240.896 274.133333l33.237333-33.237333 564.096 564.096z" fill="#1D1F21" p-id="4674"></path><path d="M274.133333 838.229333l-33.237333-33.237333L804.992 240.896l33.237333 33.237333z" fill="#1D1F21" p-id="4675"></path></svg>
        </div>`;
        }


        $(".web-filter-box input[name='webCollectionFilter']").change(webFilterChange)

        $(".container-label-warp").html(currentLabelHtml+'<div class="container-label-warp-clear">{{lang.collections.detail.clear_all | default:"Clear all"}} </div>')

        $(".container-label-warp-item").click(function(){
          var id  = $(this).data("id");
          tagIds[index] = tagIds[index].filter(el=>el!=id)
          var tagIdsStr = tagIds[index].length ?JSON.stringify(tagIds):""
          location.href = moi.setUrlParams(location.href, { "tag_ids": tagIdsStr,"page": 1});
        })
        $(".container-label-warp-clear").click(function(){
            location.href = moi.setUrlParams(location.href, { "tag_ids": "","page": 1});
        })
      }
    }

    {% comment %} 选中筛选条件回显 {% endcomment %}
    function initFilter(){
      var tagIds = moi.getUrlParam("tag_ids");
      if(tagIds && tagIds != "{}"){
        labelShow(tagIds,_GET_C_SETTING_("collection").labels,_GET_C_SETTING_("collection").current_labels)
        {% comment %} 多级筛选修改 {% endcomment %}
        $(".web_filter_clear").show();
        tagIds = JSON.parse(tagIds);

        var keys = Object.keys(tagIds);
        for (let i = 0; i < keys.length; i++) {
          const element = tagIds[keys[i]];
            element.forEach(function(tagId){
              $(".web-filter-box").eq(keys[i]).find('input[name="webCollectionFilter"]').each(function(index, element) {
                if($(this).val() == tagId){
                  $(this).attr('checked', true)
                }
              });
              $(".mobile-filter-box").eq(keys[i]).find('input[name="mobileCollectionFilter"]').each(function(index, element) {
                if($(this).val() == tagId){
                  $(this).attr('checked', true)
                }
              });
            });
        }
      }
      var vendor = moi.getUrlParam("vendor");
      if(vendor){
        $(".web_filter_clear").show();
        vendor = vendor.split(",");
        vendor.forEach(function(val){
          $('input[name="webVendor"][value="'+val+'"]').attr('checked', true)
          $('input[name="mobileVendor"][value="'+val+'"]').attr('checked', true)
        })
      }
      var variant_price_max = moi.getUrlParam("variant_price_max");
      if(variant_price_max){
        $(".web_filter_clear").show();
        $('#variant_price_max').val(variant_price_max);
        $('#mobile_variant_price_max').val(variant_price_max);
      }
      var variant_price_min = moi.getUrlParam("variant_price_min");
      if(variant_price_min){
        $(".web_filter_clear").show();
        $('#variant_price_min').val(variant_price_min);
        $('#mobile_variant_price_min').val(variant_price_min);
      }

      if($(".collection-filter-warp").html() && $(".collection-filter-warp").html().trim() == ""){
        $(".collection-filter-box").hide();
      }
    }

    initFilter();

    
    $("body").on("click", ".collection_detail_default df-oemmenu df-oemmenu-label", function () {
        $(this).parent().find("df-oemmenu-warp").slideToggle()
        if($(this).parent().hasClass("df-oemmenu-acrive")){
          $(this).parent().find("df-oemmenu-warp").slideUp('slow',function(){
            $(this).parent().removeClass("df-oemmenu-acrive");
          });

        }else{
          $(this).parent().find("df-oemmenu-warp").slideDown('slow',function(){
          });
          $(this).parent().addClass("df-oemmenu-acrive"); 
        }
        
    });
    $("body").on("click", "df-oemdrawer df-oemdrawer-label", function () {
      var node = $(this).parent();
      node.addClass("df-oemdrawer-open");
      setTimeout(function () {
          node.find("df-oemdrawer-popup-warp").addClass("df-oemdrawer-popup-open");
      }, 100);
    });

    $("body").on("click", ".collection_detail_default .drawer-close", function () {
        var node = $(this).parents("df-oemdrawer");
        node.find("df-oemdrawer-popup-warp").removeClass("df-oemdrawer-popup-open");
        setTimeout(function () {
            node.removeClass("df-oemdrawer-open");
        }, 350);
    });

    function filterParams(obj) {
      let _newPar = {};
      for (let key in obj) {
        if ((obj[key] === 0 || obj[key] === false || obj[key]) && obj[key].toString().replace(/(^\s*)|(\s*$)/g, '') !== '') {
          _newPar[key] = obj[key];
        }
      }
      return _newPar;
    }

    {% comment %} 判断是否滚动加载或则数字分页 {% endcomment %}
    {% if pagination_type == 1 %}
      function getCollectionProduct(params){
        var getURl = moi.setUrlParams(location.pathname + location.search,params);
        if(params.page > 1){
          history.replaceState(null, null, moi.setUrlParams(location.href, filterParams(params)));
        }
        moi.appendLoading({container:"#collection-product-warp",theme:'white',size:32})
        moi.ajax({
          url: getURl,
          type: "get",
          complete:function(){
            moi.removeLoading("#collection-product-warp")
          },
          success: function (res) {
            if (res.code !== 0) {
              return moi.message({content:res.msg,type:"error"})
            }
            var resData = res.data;
            if(params.page === 1){
              labelShow(params.tag_ids,resData.collection.labels,resData.collection.current_labels)
            }
            if(resData.paginate){
              $("#collection-product-warp").html("")
              engine.parseAndRender($("#id-collection-product-temp").html(), {
                products: resData.collection.products,
                collection_handle: _GET_C_SETTING_("collection").handle,
                data_from: "{{ data_from }}",
                lang: lang
              }).then(function(productHtml) {
                $("#collection-product-warp").append('<div class="collection_content collection_product_wap_2 df-overflow-hidden"><ul>'+productHtml+'</ul></div>');
                $("#collection-product-warp").find(".product_view").click(quickview);
                $(".product_num span").text(resData.collection.all_products_count)
                engine.parseAndRender($("#collection-paginate-temp").html(), {
                  paginate: resData.paginate,
                  lang: lang
                }).then(function(paginateHTml) {
                  $("#collection-product-warp").append(paginateHTml)
                  window.productSize && window.productSize( $("#collection-product-warp").find(".product_img"))
  
                  {% if theme_config.global.product_img_list_type != 0 %}
                    let productDetail = new shopProduct({})
                    productDetail.renderProductImgList()
                    productDetail = null
                  {% endif %}
                  $("#collection-product-warp").find(".mo-pagination-value").click(function(){
                    var URL = $(this).data("https");
                    const urlSearchParams = new URLSearchParams(URL.split("?")[1]);
                    const params = Object.fromEntries(urlSearchParams.entries());
                    getCollectionProduct(params)
                  })
                  $("#collection-product-warp").find(".mo-pagination-handle").click(function(){
                    var URL = $(this).data("https");
                    const urlSearchParams = new URLSearchParams(URL.split("?")[1]);
                    const params = Object.fromEntries(urlSearchParams.entries());
                    getCollectionProduct(params)
                  })
  
                  
                });
              });
            }else{
              $(".product_num span").text(0)
              $("#collection-product-warp").html($("#collection-product-empty-temp").html())
            }
  
          }
        })
      }
     

    {% else %}
      let page = 1;
      let isAll = true;
      let isScrollLoad = false;
      const waterfall = new waterfalls({
        id: `#collection-product-content`,
        bottomDistance: 30,
        scrollBottom: function(){
          if (!isScrollLoad && !isAll) {
            page++;
            {% comment %} 移动pc获取不同参数 {% endcomment %}
            const params = moi.isMobile()?getMobileFilterParams(): getWebFilterParams();
            params.page = page;
            getCollectionProduct(params);
          }  
        },
        renderType: "liquid",
        renderComplete(node) {
          node.find(".product_view").click(quickview);
          window.productSize && window.productSize(node.find(".product_img"))
          isScrollLoad = false;
          
        },
        resizeConfig: [
          {
            min: 0,
            max: 767,
            rowGutter: "15px",
            columnsGutter: "15px",
            columns: 2
          },{
            min: 768,
            rowGutter: "30px",
            columnsGutter: "30px",
            columns: {{ section.settings.web_column | default:4 }}
          }],
          render(data, callback) {
            engine.parseAndRender($("#id-collection-product-temp").html(), {
              products: data,
              theme_config: themeConfig,
              lang: lang,
              collection_handle: _GET_C_SETTING_("collection").handle,
              data_from: "{{ data_from }}"
            }).then(function(liquidHtml) {
              const node = $(liquidHtml);
              callback && callback.call(this, node);
              {% if theme_config.global.product_img_list_type != 0 %}
                let productDetail = new shopProduct({})
                productDetail.renderProductImgList()
                productDetail = null
              {% endif %}

            });
          }
        });
      function getCollectionProduct(params) {
        page = params.page
        isScrollLoad = true;
        if(params.page === 1){
          $("#collection-product-content").find(".mo-empty").remove();
          waterfall.clear()
        } 
        waterfall.showLoad();
        var getURl = moi.setUrlParams(location.pathname + location.search,params);
        moi.ajax({
          url: getURl,
          type: "get",
          success: function(ret) {
            if (!ret.code) {
              waterfall.hideLoad();
              waterfall.addStorage(ret.data.collection.products);
              isAll = !ret.data.collection.products.length? true: false;
            }
            //$(".product_num span").text(ret.data.collection.all_products_count)
            if(params.page > 1){
              history.replaceState(null, null, moi.setUrlParams(location.href, filterParams(params)));
            }
            if(params.page === 1){
              labelShow(params.tag_ids,ret.data.collection.labels,ret.data.collection.current_labels)
            }

            if(!ret.data.collection.products.length && params.page == 1){
              $("#collection-product-content").append($("#collection-product-empty-temp").html())
            }
          }
        });
      }

      {% comment %} 移动pc获取不同参数 {% endcomment %}
      getCollectionProduct( moi.isMobile()?getMobileFilterParams(): getWebFilterParams());

    {% endif %}


    function getURlTagIds(){
      var oldIds = [] 
      var tagIds = JSON.parse(moi.getUrlParam("tag_ids") || "{}");
      Object.keys(tagIds).forEach(key=>oldIds.push.apply(oldIds,tagIds[key]));
      return oldIds
    }

    {% comment %} 获取筛选参数 {% endcomment %}
    function getWebFilterParams(){
      var filterIds = {};

      if(sectionTagType == 1){
        filterIds = JSON.parse(moi.getUrlParam("tag_ids") || "{}");
      }

      $(".web-filter-box").each(function(index){
        $(this).find("input[name='webCollectionFilter']:checked").each(function(idx) {
          if(!filterIds[index]){
            filterIds[index] = []
          }
          var tagId = $(this).val();
          if(!filterIds[index].includes(tagId)){
            filterIds[index].push($(this).val());
          }
        });
      })
      var vendorIds = []
      $("input[name='webVendor']:checked").each(function(idx) {
        vendorIds.push($(this).val());
      });

     
      var sort_by = $('#sort_by_select').val();
      var variant_price_min = $('#variant_price_min').val();
      var variant_price_max = $('#variant_price_max').val();
      var tagIdsStr = JSON.stringify(filterIds);
      return {
        "sort_by": sort_by || "",
        "tag_ids": tagIdsStr,
        "variant_price_min":variant_price_min || "",
        "variant_price_max":variant_price_max || "",
        "currency":_GET_C_SETTING_("currency_code"),
        "vendor":vendorIds.join(","),
        "tag_linkage":"{{section.settings.tag_type}}",
        "page": 1
      }
    }

    function getMobileFilterParams(){
      var filterIds = {};
      if(sectionTagType == 1){
        filterIds = JSON.parse(moi.getUrlParam("tag_ids") || "{}");
      }
      $(".mobile-filter-box").each(function(index){
        $(this).find("input[name='mobileCollectionFilter']:checked").each(function(idx) {
          if(!filterIds[index]){
            filterIds[index] = []
          }
          filterIds[index].push($(this).val());
        });
      })
      var vendorIds = []
      $("input[name='mobileVendor']:checked").each(function(idx) {
        vendorIds.push($(this).val());
      });
      var sort_by = $('input[name="sortBy"]:checked').val();
      var variant_price_min = $('#mobile_variant_price_min').val();
      var variant_price_max = $('#mobile_variant_price_max').val();
      var tagIdsStr = JSON.stringify(filterIds);
      return {
        "sort_by": sort_by || "",
        "tag_linkage":"{{section.settings.tag_type}}",
        "tag_ids": tagIdsStr == "{}" ? moi.getUrlParam("tag_ids"):tagIdsStr,
        "variant_price_min":variant_price_min || "",
        "variant_price_max":variant_price_max || "",
        "currency":_GET_C_SETTING_("currency_code"),
        "vendor":vendorIds.join(","),
        "page": 1
      }
    }
    {% comment %} pc筛选 {% endcomment %}
    function webFilterChange(){
        var filterParams =  getWebFilterParams();
        if(filterParams.tag_ids == "{}" && !filterParams.variant_price_min && !filterParams.variant_price_max && !filterParams.vendor){
          $(".web_filter_clear").hide();
        }else{
          $(".web_filter_clear").show();
        }
        // $("html,body").stop().animate({ scrollTop: $("#collection_detail_scrollTop").offset().top }, 400, "linear");
        getCollectionProduct(filterParams)
    }
    $("input[name='webVendor']").change(webFilterChange)
    $("input[name='webCollectionFilter']").change(webFilterChange)
    $("#variant_price_min").bind('input propertychange',webFilterChange)
    $("#variant_price_max").bind('input propertychange',webFilterChange)
		$('#sort_by_select').change(webFilterChange)

    $("#filter_submit").click(function(){
      var filterParams =  getMobileFilterParams();
      getCollectionProduct(filterParams)
    })
    
    $(".filter_clear").click(function(){
      location.href = moi.setUrlParams(location.href, { "tag_ids": "",variant_price_max:"",variant_price_min:"",vendor:"","page": 1});
    })


    {% if section.settings.show_more_description != '' and section.settings.show_top and collection_detail.top_descript %}
      $('.collection_detail_default .show_more_description_top span').on('click',function() {
        $(this).toggleClass('show_more')
        $('.collection_detail_default .collection_detail').toggleClass('hide_more')
      })
    {% endif %}

    {% if section.settings.show_more_description != '' and section.settings.show_bottom and collection_detail.bottom_descript %}
      $('.collection_detail_default .show_more_description_bottom span').on('click',function() {
        $(this).toggleClass('show_more')
        $('.collection_detail_default .collection_bom_detail').toggleClass('hide_more')
      })
    {% endif %}
 

	})
	
</script>

{% schema %}
{
	"tag": "",
	"class": "collection_detail",
	"is_global": false,
	"name": {
		"zh_CN": "专辑详情",
		"en_US": "Collection Details"
	},
	"max_blocks": 15,
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "头部描述",
				"en_US": "Head Description"
			},
			"default": true,
			"id": "show_top"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "底部描述",
				"en_US": "Bottom Description"
			},
			"default": true,
			"id": "show_bottom"
		},
    {
      "type": "card_switch",
      "label": {
        "zh_CN": "宽度铺满",
        "en_US": "Spread the width"
      },
      "id": "is_fill",
      "default": false
    },
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "是否显示排序",
				"en_US": "Whether to show sorting"
			},
			"default": true,
			"id": "show_sort"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "是否显示供应商筛选",
				"en_US": "Whether to show supplier selection"
			},
			"default": false,
			"id": "show_vendor"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "是否显示价格筛选",
				"en_US": "Whether to show the price filter"
			},
			"default": false,
			"id": "show_price"
		},
    {
      "type": "card_input",
      "label": {
        "zh_CN": "查看更多描述文字",
        "en_US": "See more descriptions"
      },
      "id": "show_more_description",
      "default": ""
    },
    {
      "type": "card_input_number",
      "max": 20000,
      "min": 0,
      "id": "more_height",
      "label": {
        "zh_CN": "折叠高度",
        "en_US": "Folding height"
      },
      "info": {
				"zh_CN": "内容宽度单位px",
        "en_US": "Content width unit px"
			},
      "default": 135
    },
		{
			"type": "card_input_number",
			"max": 80,
			"min": 8,
			"id": "pagesize",
			"label": {
				"zh_CN": "商品每页数量",
				"en_US": "Product number each page"
			},
			"info": {
				"zh_CN": "默认数量12个;最小8个、最大80个;",
				"en_US": "Default number 12, minimum 8, maximum 80;"
			},
			"refresh": true,
			"default": 12
		},
    {
			"type": "card_slider",
			"id": "web_column",
			"max": "6",
			"min": "3",
			"label": {
				"zh_CN": "pc每排商品数量",
				"en_US": "PC number per row"
			}
		},
    {
			"type": "card_select",
			"id": "pagination_type",
			"label": {
				"zh_CN": "分页",
				"en_US": "Pagination"
			},
      "option": [
        {
          "label": {
            "zh_CN": "数字分页",
            "en_US": "Digital paging"
          },
          "value": 1
        },
        {
          "label": {
            "zh_CN": "滚动加载",
            "en_US": "Scrolling loading"
          },
          "value": 2
        }
      ],
      "default": 1
		},
    {
			"type": "card_select",
			"id": "tag_type",
			"label": {
				"zh_CN": "标签关联关系",
				"en_US": "Tag association"
			},
      "option": [
        {
          "label": {
            "zh_CN": "多组标签联动",
            "en_US": "Default multi-group tag linkage"
          },
          "value": 0
        },
        {
          "label": {
            "zh_CN": "动态选择筛选",
            "en_US": "Dynamic selection filter"
          },
          "value": 1
        }
      ],
      "default": 0
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "标签筛选",
				"en_US": "Tag selection"
			}
		}
	],
	"blocks": [
		{
			"name": {
				"zh_CN": "标签组",
				"en_US": "Grouping label group"
			},
			"type": "filter-item",
			"settings": [
				{
					"type": "card_input",
					"label": {
						"zh_CN": "分组标题",
						"en_US": "Title"
					},
					"id": "filter_title",
					"default": "filter"
				},
				{
					"type": "card_switch",
					"label": {
						"zh_CN": "默认展开",
						"en_US": "Open by default"
					},
					"default": true,
					"id": "filter_open"
				},
				{
					"type": "card_select_show",
					"label": {
						"zh_CN": "筛选标签",
						"en_US": "Filter tag"
					},
					"placeholder": {
						"zh_CN": "选择标签",
						"en_US": "Choose the label"
					},
					"default": {
						"filter_type": 1,
						"product_tag": [],
						"sort": "created_desc"
					},
					"id": "filter",
					"default_setting": {
						"type": "card_select",
						"label": {
							"zh_CN": "筛选标签",
							"en_US": "Filter tag"
						},
						"info": {
							"zh_CN": "<p>最多展示前100个标签 <a target='_blank' href='/document/collection/tag' style='color:#3590e9'>如何配置？</a></p>",
							"en_US": "<p>show top 100 tag<a target='_blank' href='/document/collection/tag' style='color:#3590e9'>how to configure?</a ></p>"
						},
						"id": "filter_type",
						"option": [
							{ 
								"label": {
									"zh_CN": "全部商品标签",
									"en_US": "All goods labels"
								},
								"value": 1
							},
							{
								"label": {
									"zh_CN": "部分商品标签",
									"en_US": "Part of labels"
								},
								"value": 2
							}
						],
						"default": 1
					},
					"slot_settings": [
						{
							"value": 2,
							"settings": [
                {
									"type": "card_select",
									"label": {
										"zh_CN": "标签排序",
										"en_US": "Tag sort"
									},
									"option": [
                    {
											"label": {
												"zh_CN": "按关联商品数降序",
												"en_US": "The number of associated items is in descending order"
											},
											"value": "default_sort"
										},
										{
											"label": {
												"zh_CN": "按创建时间降序",
												"en_US": "Descending by created at"
											},
											"value": "created_desc"
										},
										{
											"label": {
												"zh_CN": "按创建时间升序",
												"en_US": "Ascending by created at"
											},
											"value": "created_asc"
										},
										{
											"label": {
												"zh_CN": "按名称A到Z展示",
												"en_US": "Display by name A to Z"
											},
											"value": "letter_asc"
										},
										{
											"label": {
												"zh_CN": "按名称Z到A展示",
												"en_US": "Display by name Z to A"
											},
											"value": "letter_desc"
										},
                    {
											"label": {
												"zh_CN": "自定义排序",
												"en_US": "Custom sort"
											},
											"value": "custom_sort"
										}
									],
									"default": "default_sort",
									"id": "sort"
								},
								{
									"type": "card_product_tag",
									"label": {
										"zh_CN": "选择商品标签",
										"en_US": "Choose labels"
									},
									"placeholder": {
										"zh_CN": "输入商品标签",
										"en_US": "Input labels"
									},
									"default": [],
									"id": "product_tag"
								}
							]
						},
						{
							"value": 1,
							"settings": [
								{
									"type": "card_select",
									"label": {
										"zh_CN": "标签排序",
										"en_US": "Tag sort"
									},
									"option": [
										{
											"label": {
												"zh_CN": "按创建时间降序",
												"en_US": "Descending by created at"
											},
											"value": "created_desc"
										},
										{
											"label": {
												"zh_CN": "按创建时间升序",
												"en_US": "Ascending by created at"
											},
											"value": "created_asc"
										},
										{
											"label": {
												"zh_CN": "按名称A到Z展示",
												"en_US": "Display by name A to Z"
											},
											"value": "letter_asc"
										},
										{
											"label": {
												"zh_CN": "按名称Z到A展示",
												"en_US": "Display by name Z to A"
											},
											"value": "letter_desc"
										}
									],
									"default": "created_desc",
									"id": "sort"
								}
							]
						}
					]
				}
			]
		}
	],
	"default": {
		"settings": {
			"refresh": true,
			"pagesize": 12,
      "is_fill": false,
			"show_img": true,
			"show_top": true,
			"show_bottom": true,
			"show_sort": true,
			"show_availability": false,
			"show_price": false,
			"show_vendor": false,
      "pagination_type":1,
      "web_column":4,
      "tag_type":0,
      "show_more_description": "",
      "more_height": 135
		},
		"blocks": [
      {
        "block_type": "filter-item",
        "filter_title": "filter",
        "filter_open": true,
        "filter": {
            "filter_type": 1,
            "product_tag": [],
            "sort": "created_desc"
        }
      }
    ]
	}
}
{% endschema %} 